<template>
  <div id="report" class="report-wrapper">
    <div class="wrapper-left">
      <div class="cate-search-box">
        <div class="search-box">
          <el-input v-model="key" placeholder="输入关键词进行过滤">
            <el-button slot="append" icon="el-icon-search" @click="searchCate"></el-button>
          </el-input>
        </div>
      </div>
      <div class="cate-container">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          :load="loadNode"
          lazy
          :highlight-current="true"
          show-checkbox
          @node-click="handleNodeClick"
          @check="handleCheckChange"
        ></el-tree>
      </div>
    </div>
    <div class="wrapper-right">
      <div class="search-box">
        <div class="search-name">
          <span>开始时间：</span>
          <el-date-picker v-model="searchParams.sd" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </div>
        <div class="search-name">
          <span>结束时间：</span>
          <el-date-picker v-model="searchParams.ed" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </div>
        <el-button class="warning-btn" @click="handleSearch">查询</el-button>
      </div>
      <div class="wrapper-content">
        <el-table :data="tableData" style="width: 100%" row-class-name="tableClass">
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="imei" label="imei" width="180" align="center"></el-table-column>
          <!-- <el-table-column prop="devnumber" label="设备名称" width="180" align="center"></el-table-column> -->
          <el-table-column prop="createtime" label="采集时间" align="center"></el-table-column>
          <el-table-column prop="temperature" label="层环境温度" align="center"></el-table-column>
          <el-table-column prop="humidity" label="环境湿度" align="center"></el-table-column>
          <el-table-column prop="atemperature" label="Atemp" align="center"></el-table-column>
          <el-table-column prop="btemperature" label="Btemp" align="center"></el-table-column>
          <el-table-column prop="ctemperature" label="Ctemp" align="center"></el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :page-sizes="[10, 20, 40]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  
  </div>
</template>
<script>
import { getDevicelogs, getRoutemenu } from "@/api";
import { formatTime } from "@/tools/format";
const prevTime = new Date().setHours(0, 0, 0, 0);
const nextTime = new Date().setHours(23, 59, 59, 59);
export default {
  data() {
    return {
      showBody: false,
      key: "",
      searchParams: {
        sd: formatTime(prevTime, "YYYY-MM-DD hh:mm:ss"),
        ed: formatTime(nextTime, "YYYY-MM-DD hh:mm:ss"),
        id: "",
        types: 0
      },
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      options: [
        {
          value: "1",
          label: "线路",
        },
        {
          value: "2",
          label: "设备",
        },
      ],
      tableData: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {
    this.getRoutemenus();
    // setTimeout(() => {
    //   this.showBody = true;
    // }, 1000)
  },
  methods: {
    //请求左侧菜单
    getRoutemenus() {
      getRoutemenu({
        key: this.key,
      })
        .then((res) => {
          if (res.statusCode == 200) {
            if (res.data && res.data.length > 0) {
              this.treeData = res.data;
              this.searchParams.id = res.data[0].id;
              this.getList();
            } else {
              this.$message.warning(res.msg);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 请求table数据
    getList() {
      const params = {
        sd: this.searchParams.sd,
        ed: this.searchParams.ed,
        id: this.searchParams.id,
        types: this.searchParams.types,
        page: this.pagination.page,
        limit: this.pagination.pageSize,
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      //   this.tableData = []
      getDevicelogs(params)
        .then((res) => {
          loading.close();
          if (res.statusCode == 200) {
            this.tableData = res.data.items || [];
            this.pagination.total = res.data.totalItems;
          }
        })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    },
    handleSearch() {
      this.searchParams.page = 1;
      console.log(typeof this.searchParams.sd);
      if (typeof this.searchParams.sd == "object") {
        this.searchParams.sd = formatTime(
          this.searchParams.sd,
          "YYYY-MM-DD hh:mm:ss"
        );
      }
      if (typeof this.searchParams.ed == "object") {
        this.searchParams.ed = formatTime(
          this.searchParams.ed,
          "YYYY-MM-DD hh:mm:ss"
        );
      }
      this.getList();
    },
    handleNodeClick(data, p1, p2) {
      console.log("nodeclcik");
    },
    handleCheckChange(data, p1) {
      let flag = false;
      if (p1.checkedNodes.length > 0) {
        p1.checkedNodes.forEach((item) => {
          if (item.id == data.id) {
            flag = true;
          }
        });
      }
      if (flag) {
        this.searchParams.id = data.id;
        this.searchParams.types = data.type
        this.getList();
      }
    },
    loadNode(node, resolve) {
      if (node.data.children && node.data.children.length > 0) {
        return resolve(node.data.children);
      } else {
        return resolve([]);
      }
    },
    searchCate() {
      this.getRoutemenus();
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pagination.page = val;
      this.getList();
    },
  },
};
</script>
<style lang="less" scoped>
.report-wrapper {
  position: relative;
  color: #fff;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  .wrapper-left {
    width: 230px;
    .search-box {
      margin: 15px 0 25px;
    }
    .cate-container {
      /deep/.el-tree {
        background: none;
        color: #fff;
        // height: 100%;
      }
      /deep/.el-tree-node__content {
        height: 32px;
      }
      /deep/.el-tree-node__content:hover /deep/.el-tree-node__label {
        color: #333;
      }
    }
    /deep/.el-tree--highlight-current
      /deep/.el-tree-node.is-current
      > .el-tree-node__content {
      color: #333;
    }
  }
  .wrapper-right {
    margin-left: 15px;
    flex: 1;
    position: relative;
    .search-box {
      //   display: flex;
      //   justify-content: space-between;
      //   align-items: center;
      margin: 15px 0 25px;
      position: relative;
      overflow: hidden;
      .search-name {
        width: 26%;
        float: left;
      }
      .warning-btn {
        position: absolute;
        border: none;
        left: 53%;
        height: 40px;
        background: #fa6400;
        border-radius: 5px;
        padding: 0 35px;
        color: #fff;
        margin-left: 20px;
      }
      /deep/.el-input {
        width: 70%;
      }
    }
    .wrapper-content {
      border: 1px solid #496fc0;
      border-bottom: none;
      margin-bottom: 10px;
    }
  }
  /deep/.has-gutter th.el-table__cell {
    background: #496fc0 !important;
  }
  /deep/.tableClass {
    background: #1b232d !important;
    color: #fff;
  }
  /deep/.el-table th.el-table__cell,
  /deep/.el-table tr {
    background: #1b232d;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #409eff;
  }
  /deep/.el-table--enable-row-hover
    .el-table__body
    tr:hover
    > td.el-table__cell {
    background: #1b232d !important;
    color: #fff;
  }
  /deep/.el-checkbox__inner {
    background: none;
  }
  /deep/.el-checkbox__inner::after {
    border: 1px solid #409eff;
    border-left: 0;
    border-top: 0;
  }
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #496fc0;
}
/deep/.el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #496fc0;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #496fc0 !important;
}
/deep/.el-tree-node__content:hover {
  background-color: none !important;
}
/deep/.el-tree-node:focus > .el-tree-node__content {
  background-color: none !important;
}
/deep/.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #496fc0;
}

/* 加载旋转动画 */
#load {
  width: 100%;
  height: calc(100% + 75px);
  position: absolute;
  background: url(../../assets/data08.png) no-repeat #061537;
  background-size: cover;
  top: -75px;
  left: 0;
  z-index: 999;
}
#load .load_img {
  position: absolute;
  left: calc(50% - 182px);
  top: calc(50% - 182px);
}
.load_img img {
  position: absolute;
  left: 0;
  top: 0;
}
.load_img .jzxz1 {
  animation: xz1 8s infinite linear;
}
@keyframes xz1 {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.load_img .jzxz2 {
  animation: xz2 7s infinite linear;
}
@keyframes xz2 {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
</style>